<template>

  <el-card>
    <h2>组织管理</h2>
    <el-row>
      <el-col :span="12">
        <el-form :inline="true" :model="SearchParams" class="demo-form-inline">
          <el-input v-model="SearchParams.departmentName" placeholder="输入部门名称" clearable style="margin-right: 20px;" />
          <el-button type="primary" @click="">查询</el-button>
          <el-button plain @click="resetSearch">重置</el-button>
        </el-form>
      </el-col>
      <el-col :span="12" style="text-align: right;">
        <el-button type="primary" @click="">新增部门</el-button>
        <el-button plain>全部展开</el-button>
        <el-button plain>全部折叠</el-button>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px;">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="departmentName" label="部门" />
        <el-table-column prop="departStatus" label="状态">
          <template v-slot="scope">
            <el-tag v-if="scope.row.departStatus == true">启用</el-tag>
            <el-tag v-else>禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="userCount" label="成员数量" />
        <el-table-column prop="manageName" label="主管人员" />
        <el-table-column prop="departDesc" label="部门描述" />
        <el-table-column prop="updateTime" label="更新时间">
          <template v-slot="scope">
            <span v-if="scope.row.updateTime == null">{{ moment(scope.row.addTime).format("YYYY-MM-DD HH:mm:SS")
            }}</span>
            <span v-else>{{ moment(scope.row.updateTime).format("YYYY-MM-DD HH:mm:SS") }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="操作" />
      </el-table>
    </el-row>
    <el-row style="margin-top: 20px;">
      <el-col :span="12">
        <el-button plian>选择全部</el-button>
        <el-button plain>反向选择</el-button>
        <el-button plain>更多操作</el-button>
      </el-col>
      <el-col :span="12" style="display: flex; justify-content: flex-end;">
        <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
          :page-sizes="[10, 15, 20, 30]" :disabled="false" :background="true" layout=" prev, pager, next, sizes"
          :total="page.totalCount" @size-change="handleSizeChange" @current-change="handleCurrentChange"
          style="margin-right: 0%;" />
      </el-col>
    </el-row>
  </el-card>


  <Pagination :current-page="page.pageIndex" :page-size="page.pageSize" :total-count="page.totalCount" :total-page="page.pageCount" @size-change="handleSizeChange" @current-change="handleCurrentChange">
  </Pagination>


</template>
<script setup lang="ts">
import { onMounted, reactive, ref, watch } from 'vue'
import { getdepartmentlist } from '@/api/department'
import moment from 'moment'
import Pagination from '@/components/Pagination.vue'

//钩子函数
onMounted(() => {
  LoadDepartment()
})

//#region  部门数据
// 部门数据
const tableData = ref([{

}])
//查询参数
const SearchParams = reactive({
  departmentName: ""
})
// 重置查询
const resetSearch = () => {
  SearchParams.departmentName = ""
}
// 加载部门数据
const LoadDepartment = () => {
  var params = { PageIndex: page.pageIndex, PageSize: page.pageSize, DepartmentName: SearchParams.departmentName }
  const res = getdepartmentlist(params).then(res => {
    tableData.value = res.data.data.pageData
    page.totalCount = res.data.data.totalCount
    page.pageCount = res.data.data.pageCount
  })
}

//#endregion

//#region  分页

const page = reactive({
  totalCount: 0,
  pageCount: 0,
  pageIndex: 1,
  pageSize: 10
})


const handleSizeChange = (val: number) => {
  page.pageSize = val
  LoadDepartment()
}
const handleCurrentChange = (val: number) => {
  page.pageIndex = val
  LoadDepartment()
}


//#endregion

</script>
/*分页*/
<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
